<template>
	<view>
		<custom-navigation-bar title=""></custom-navigation-bar>
		<view class="a_top">
			<view class="a_menu">
				<view v-for="(item,index) in menu" :key="index"   >
					<view v-if="item.id==menuIndex" class="a_menu_item_se" @click="menuSelect(item,index)">{{item.name}}</view> 
					<view v-if="item.id!=menuIndex" class="a_menu_item" @click="menuSelect(item,index)">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="main" >
			<view class="info-menu">
				<view style="width: 100%;float: left;height: 30rpx;"></view>
				<view v-for="(item,index) in sheQunMenu" :key="index"  >
					<view v-if="item.id==sheQunMenuIndex" class="sq_select" @click="sheQunSelect(item)">{{item.name}}</view>
					<view v-if="item.id!=sheQunMenuIndex" class="sq"  @click="sheQunSelect(item)">{{item.name}}</view>
				</view>
			</view>
			<view class="info-box">
				<view class="info-title" >{{sheQunName}}</view>
				<view style="width: 100%;height: 100%;overflow: scroll;"> 
					<view class="hd-search"> 
						<label class="hd-search-def" style="color: black;">活动情况：</label> 
						<label class="hd-search-title">报名中</label>
						<label class="hd-search-def">已完成</label> 
					</view>
					<view class="hd-search"> 
						<label class="hd-search-def" style="color: black;">活动筛选：</label>
						<label class="hd-search-def">活动推荐</label>
						<label class="hd-search-def">人气爆棚</label> 
						<label class="hd-search-def">即将截止</label>
					</view>
					<view class="hd-search"> 
						<label class="hd-search-def" style="color: black;">活动时间：</label>
						<label class="hd-search-def">全部</label>
						<label class="hd-search-def">近7天</label>
						<label class="hd-search-def">近30天</label> 
					</view>
					<view style="width: 100%;float: left;height: 40rpx;"></view>
					<view style="width: 100%;height:100%;overflow: scroll;position: fixed;top: 540rpx;">
						<view class="hd-item" v-for="(item,index) in gy" :key="index">
							<view class="hd-item-image">
								<image :src="item.pic" style="width: 200rpx;height: 200rpx;float: left;"></image>
								<view class="hd-item-bmz">报名中</view>
							</view>
							<view class="hd-item-info">
								<view class="hd-item-info-title">{{item.name}}</view>
								<view class="hd-item-info-1">{{item.time}}</view>
								<view class="hd-item-info-2">{{item.address}}</view>
								<view class="hd-item-info-3">{{item.all}}/{{item.join}}</view>
								<view class="hd-item-info-4"> 
									<progress :percent="item.bili" activeColor="#10AEFF" stroke-width="3" />
								</view> 
								<view class="hd-item-info-4">
									<view class="hd-item-info-5">公益活动</view>
								</view>
								<!-- <view class="hd-item-info-price">
									￥{{item.price}}
								</view> -->
							</view>
						</view>
						<view style="width: 100%;height: 560rpx;background-color: white;float: left;"></view>
					</view> 
				</view>
			</view> 
		</view>
		
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	import http from '../../utils/http';
	import { ref } from 'vue'; //,{id:3,name:'邻里圈'}
	const menu=ref([{id:1,name:'主题活动'},{id:2,name:'活动联名'},{id:3,name:'公益活动'}]); 
	const menuIndex=ref(menu.value[0].id);
	const boxIndex=ref(0);
	function menuSelect(item,index){
		menuIndex.value=item.id;
		boxIndex.value=index;
	} 
	const sheQunMenu=ref([{id:1,name:'单身社群'},{id:2,name:'中年少女圈'},{id:3,name:'老青年生活'},{id:4,name:'辣妈遛娃'}]);
	const sheQunMenuIndex=ref(sheQunMenu.value[0].id);
	const sheQunName=ref(sheQunMenu.value[0].name); 
	function sheQunSelect(item){
		sheQunMenuIndex.value=item.id;
		sheQunName.value=item.name; 
	} 
	const gy=ref([
		{
			id:1,
			name:'活动名称1',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:2,
			name:'活动名称2',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:3,
			name:'活动名称3',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:2,
			name:'活动名称2',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:3,
			name:'活动名称3',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:2,
			name:'活动名称2',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:3,
			name:'活动名称3',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:2,
			name:'活动名称2',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:3,
			name:'活动名称3',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:2,
			name:'活动名称2',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:3,
			name:'活动名称3',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:2,
			name:'活动名称2',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		},
		{
			id:3,
			name:'XXXXXXXXXXX',
			pic:'/static/hd1.png',
			time:'2024年6月14日10:39:21',
			address:'济宁市任城区',
			all:40,
			join:50,
			bili:80,
			price:99
		}
	]);
	 
</script>

<style>
	.hd-item-bmz{
		width: 90rpx;height: 40rpx;line-height: 40rpx;float: left;margin-top: -180rpx;background: #2679FF;color: white;font-size: 25rpx;text-align: center;border-top-right-radius: 11rpx;border-bottom-right-radius: 11rpx
	}
	.hd-item-info-price{
		width: 100%;float: left;color: red;font-size: 30rpx;margin-top: 15rpx;
	}
	.hd-item-info-5{
		width: 120rpx;height: 40rpx;line-height: 40rpx;border:2rpx red solid;border-radius: 10rpx;font-size: 25rpx;margin-top: 15rpx;text-align: center;
		float: left;background: #EC6283;
	}
	.hd-item-info-4{
		width: 60%;float: left;font-size: 20rpx;color: #CCCCCC;
	}
	.hd-item-info-3{
		width: 60%;float: left;text-align: right;font-size: 15rpx;
	}
	.hd-item-info-2{
		width: 100%;float: left;font-size: 20rpx;color: #CCCCCC;
	}
	.hd-item-info-1{
		width: 100%;float: left;font-size: 20rpx;color: #CCCCCC;
	}
	.hd-item-info-title{
		width: 100%;font-size: 25rpx;float: left;font-weight: bold;
	}
	.hd-item-info{
		width:350rpx;height: 200rpx;float: left;margin-left: 30rpx;
	}
	.hd-item-image{
		width: 200rpx;height: 150rpx;overflow: hidden;border-radius: 30rpx;float: left;
	}
	.hd-item{
		width: 98%;float: left;height: 200rpx;margin-bottom: 20rpx;margin-top: 10rpx;margin-left: 2%;
	}
	.hd-search-def{
		font-weight: bold;font-size: 23rpx;color: #CCCCCC;line-height: 28rpx;margin-right: 10rpx;
	}
	.hd-search-title{
		font-weight: bold;font-size: 23rpx;font-weight: bold;line-height: 28rpx;margin-right: 10rpx;color: #2AE8DC;
	}
	.hd-search{
		width: 90%;float: left;margin-left: 5%;
	}
	.hd-box{
		width: 100%;height: 150rpx;margin-top: 30rpx;
	}
	.info-menu{
		top: 360rpx;position: fixed;width: 30%;height: calc(100% - 360rpx);font-size: 28rpx;
	}
	.info-item-join{
		width: 150rpx;height: 100rpx;line-height: 100rpx;float: left;font-size: 25rpx;
	}
	.info-item-title{
		width:220rpx;height: 100rpx;font-size: 22rpx;float: left;margin-left: 20rpx;
	}
	.info-img{
		width: 100rpx;height: 100rpx;float: left;
	}
	.info-item{
		width: 95%;float: left;line-height: 100rpx;margin-left: 5%;margin-top: 20rpx;
	}
	.info-title{
		width: 95%;float: left;height: 50rpx;margin-left: 5%;margin-top: 20rpx;
	}
	.info-box{
		top: 330rpx;left: 30%;position: fixed;width: 70%;height: calc(100% - 360rpx);background: white;
	}
	.sq_select{
		width: 100%;float: left;height: 90rpx;background: white;line-height: 90rpx;text-align: center;border-top-left-radius:25rpx ;border-bottom-left-radius:25rpx ;color: #2AE8DC;font-weight: bold;
	}
	.sq{
		width: 100%;float: left;height: 90rpx;line-height: 90rpx;text-align: center;
	}
	.main{
		top: 330rpx;position: fixed;width: 100%;height: calc(100% - 300rpx);background: #F6F6F6;border-top-right-radius: 50rpx;border-top-left-radius: 50rpx;
	}
	.a_top{
		width: 100%;height: 240rpx;background: #2AE8DC;top: 150rpx;position: fixed;
	}
	.a_menu{
		width: 84%;height: 90rpx;background: white;float: left;margin-left: 8%;margin-top:44rpx;border-radius: 30rpx;
	}
	.a_menu_item{
		width: 24%;float: left;font-size: 28rpx;height: 60rpx;margin-top: 15rpx;margin-left: 7%;border-radius: 20rpx;line-height: 60rpx;text-align: center;
	}
	.a_menu_item_se{
		width:24%;float: left;font-size: 25rpx;height: 60rpx;background: #EC6283;margin-top: 15rpx;margin-left: 7%;border-radius: 20rpx;line-height: 60rpx;text-align: center;color: white;
	}
	.controls-title {
			width: 100%;
			text-align: center;
			color: #FFFFFF;
			float: left;
		}
</style>